* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  //max-width: 1200px;
  margin: auto !important;
  font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
  color: #333;
  &.add-mask-panel{
    height: 100%;
    overflow: hidden;
  }
  &::-webkit-scrollbar{
    //width: 6px;
    //height: 6px;
    //background: #ff4e6a;

  }
  &::-webkit-scrollbar-track{
    //background: rgba(0,0,0,.1);
    //border-radius: 3px;

  }
  &::-webkit-scrollbar-thumb{
      //background: #ff4e6a;
      //border-radius: 3px;
  }
  //&::-webkit-scrollbar-corner{
  //
  //}
}

a{
  color: #333;
  text-underline: #333;
}


html {
  height: 100%;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

input, textarea, button, a, select {
  border: 0;
  margin: 0;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  appearance: none;
  text-decoration: none;
}


#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

//768 1024 2080

@media screen and (max-width: 1024px){

  div.right-content {
    width: calc(100% - 280px) !important;
  }

}

@media screen and (min-width: 768px){
  div.left-content {
    transform: translate(0) !important;
  }
}

@media screen and (max-width: 768px) {

  div.left-content {
    //display: none;
    z-index: 100;
    background: white;
    transform: translate(-260px) ;

    &.screen-change {
      z-index: 100;
      background: white;
      display: block;
      transform: translate(0) !important;
    }

    .data-time{
      color:black !important;
    }
  }

  div.index {
    &::before {
      display: table;
      content: "";
    }

    div.bg {
      //background: #f4f8fb !important;
      //background: transparent !important;
    }

    #canvas{
      background: #f4f8fb;
    }

    .panel-cont{
      background: rgba(255,255,255,.5);
    }
  }

  div.right-content {
    position: relative !important;
    left: 0 !important;
    width: 100% !important;

    .header {
      //display: block !important;
      display: flex !important;
    }

    ul::before {
      display: table;
      content: "";
    }

    ul.article-page li {
      width: 100% !important;
    }

    .footer {
      font-size: 12px;
    }

    .about-page {
      .img-cont {
        margin: 0 20px;
      }

      .tags {
        padding: 0 20px;
      }

      .intro-detail {
        margin: 0 0 20px;
        padding: 20px;
      }
    }
  }

  div.address-page{
    .good-link li.link-item{
      width: 100% ;
      margin-right:0;
      a{
        justify-content: space-between;
      }
      p.intro,p.title{
        max-width:80%;
      }
    }
  }
}
